import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Avatar, Button} from 'react-native-paper';
import AsyncStorage from '@react-native-community/async-storage';
import {List, Divider} from 'react-native-paper';
import request from '../../utils/request';
export default class my extends Component {
  constructor(props) {
    super(props);
    this._handleGetInfo();
    this._getInfo5000ms();

    this.state = {
      user: {},
    };

    // AsyncStorage.getItem('user').then(u => {
    //   console.log('u0', u);
    //   this.setState({
    //     user: JSON.parse(u),
    //   });
    //   console.log('u', this.state.user.userId);
    // });
  }

  _handleGetInfo() {
    AsyncStorage.getItem('userId').then(value => {
      request({
        url: '/user/id',
        method: 'get',
        params: {
          id: value,
        },
      }).then(resp => {
        // AsyncStorage.setItem('user', JSON.stringify(resp.obj));
        this.setState({user: resp.obj});
      });
    });
  }

  handleGetUser() {
    console.log(this.state.user);
  }

  _handleVipState() {
    if (this.state.user.userIsVip === 1) {
      return (
        <Text>
          VIP状态：<Text style={{color: 'green'}}>已开通</Text>
        </Text>
      );
    }
    return <Text style={{color: 'red'}}>VIP状态：未开通</Text>;
  }

  _getInfo5000ms = () => {
    this.timer = setInterval(() => {
      this._handleGetInfo();
      console.info('getInfo!');
    }, 5000);
  };

  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
  }

  render() {
    return (
      <View>
        <View style={styles.headView}>
          <Avatar.Image
            size={110}
            style={styles.avatar}
            source={{
              uri: this.state.user.userAvatar,
            }}
          />
          <Text style={styles.userName}>{this.state.user.userName}</Text>
        </View>

        <View>
          <List.Item
            title={<Text>用户ID：{this.state.user.userId}</Text>}
            // description={<Text>1</Text>}
            left={() => <List.Icon color="purple" icon="account" />}
            // right={() => (
            // <Text>{this.state.user.userId}</Text>
            // <List.Icon color="purple" icon="arrow-right-drop-circle" />
            // )}
            // onPress={() => {}}
          />
          <Divider />
          <List.Item
            title={this._handleVipState()}
            // description={<Text>1</Text>}
            left={() => <List.Icon color="purple" icon="diamond-stone" />}
            // right={() => (
            // <Text>{this.state.user.userId}</Text>
            // <List.Icon color="purple" icon="arrow-right-drop-circle" />
            // )}
            // onPress={() => {}}
          />
          <Divider />
          <List.Item
            title={
              <Text>
                VIP有效期：
                {this.state.user.userIsVip === 1
                  ? this.state.user.userVipDate
                  : '-'}
              </Text>
            }
            // description={<Text>1</Text>}
            left={() => (
              <List.Icon color="purple" icon="calendar-multiple-check" />
            )}
            // right={() => (
            // <Text>{this.state.user.userId}</Text>
            // <List.Icon color="purple" icon="arrow-right-drop-circle" />
            // )}
            // onPress={() => {}}
          />
          <Divider />
          <List.Item
            title={<Text>立即购买VIP</Text>}
            // description={<Text>1</Text>}
            left={() => (
              <List.Icon color="purple" icon="credit-card-multiple" />
            )}
            right={() => <List.Icon color="purple" icon="arrow-right" />}
            onPress={() => {
              this.props.navigation.navigate('购买会员');
            }}
          />
          <Divider />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headView: {
    // width: 1000,
    height: 180,
    backgroundColor: '#6200EE',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatar: {
    marginBottom: 10,
  },
  userName: {
    color: 'white',
    fontSize: 20,
  },
});
